<template>
    <div class="container mt-5">
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <div class="card">
            <div class="card-header">
              <h3>更新电影名称</h3>
            </div>
            <div class="card-body">
              <!-- 输入电影代码的表单 -->
              <form @submit.prevent="updateMovieName">
                <div class="form-group">
                  <label for="code">电影代码</label>
                  <input
                    type="text"
                    class="form-control"
                    id="code"
                    v-model="code"
                    placeholder="请输入电影代码"
                    required
                  />
                </div>
                <div class="form-group">
                  <label for="newName">新电影名称</label>
                  <input
                    type="text"
                    class="form-control"
                    id="newName"
                    v-model="newName"
                    placeholder="请输入新的电影名称"
                    required
                  />
                </div>
                <button type="submit" class="btn btn-primary">更新电影名称</button>
              </form>
  
              <!-- 显示更新结果 -->
              <div v-if="message" class="mt-4 alert" :class="messageClass">
                {{ message }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        code: '', // 用户输入的电影代码
        newName: '', // 用户输入的新电影名称
        message: '', // 显示给用户的消息
        messageClass: '', // 消息的样式类（成功或错误）
      };
    },
    methods: {
      // 更新电影名称
      async updateMovieName() {
        try {
          // 使用 GET 请求发送数据
          const response = await fetch(
            `http://127.0.0.1:8000/api/update?code=${encodeURIComponent(
              this.code
            )}&name=${encodeURIComponent(this.newName)}`,
            {
              method: 'GET', // 使用 GET 方法
            }
          );
  
          if (!response.ok) {
            throw new Error('更新失败，请检查电影代码是否正确');
          }
  
          // 更新成功
          this.message = '电影名称更新成功！';
          this.messageClass = 'alert-success';
  
          // 清空输入栏
          this.code = '';
          this.newName = '';
        } catch (error) {
          // 更新失败
          this.message = error.message;
          this.messageClass = 'alert-danger';
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .container {
    margin-top: 50px;
  }
  .alert {
    padding: 10px;
    border-radius: 5px;
  }
  .alert-success {
    background-color: #d4edda;
    color: #155724;
  }
  .alert-danger {
    background-color: #f8d7da;
    color: #721c24;
  }
  </style>